body {
  background: #000;
}
.container {
  width: 400px;
  height: 400px;
  margin:0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  transition: 0.5s;
  background: #000;
}

@for $i from 0 through 8 {
  .item:nth-child(#{$i + 1}) {
    background: hsl($i * 40, 100%, 75%);
  }

  .container:has(.item:nth-child(#{$i + 1}):hover) {
    $r: floor(calc($i / 3) + 1);
    $c: $i%3 + 1;
    $arr: 1fr 1fr 1fr;
    $rows: set-nth($arr, $r, 2fr);
    $cols: set-nth($arr, $c, 2fr);
    grid-template-rows: $rows;
    grid-template-columns: $cols;
  }
}
